<template>
  <div class="salaryWrap">
    <div class="date-box">
      <div class="date-con">
        <img src="./left.png" class="pic1" @click="preMonth" onclick="return false"/>
        <datetime format="YYYY-MM" v-model="month" :show.sync="showCalendar" class="date-time" :end-date="date"
                  @on-confirm="onConfirm"></datetime>
        <div class="pic2-box" @click="nextMonth">
          <img src="./right.png" class="pic2" onclick="return false"/>
        </div>
      </div>
    </div>


    <div class="wage-list">

      <div class="wage-box" v-if="showData == 1" v-for="(item,index) in salaryList" :key="index"
           @click="querySalaryDetail(item.salaryDetails,item.actualPay)">
        <div class="wage-con">
          <span class="name">{{item.companyName}}</span>
          <div class="money-box">
            <span class="money">{{item.actualPay}}元</span>
            <span class="detail">明细&nbsp;>></span>
          </div>
        </div>
        <div class="wage-btn">
          <button type="button" class="draw" @click="drawMoney(item.id,item.actualPay)"
                  v-if="item.status == 1 && item.actualPay>0">领取
          </button>
          <span class="title" v-else-if="item.status == 1 && item.actualPay <=0">本月不可领取</span>
          <span class="title" v-else>本月已领取</span>
        </div>
      </div>
      <div class="more-box" v-if="showData == 1">没有更多了~</div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关数据~</div>
      </div>
    </div>

    <!--密码键盘-->
    <div class="tx_bck" v-if="showKey">
      <div class="popup_box">
        <div class="popup_top" @click="closeModal"><img src="./close.png" class="close" onclick="return false"></div>
        <div class="pop_ubox">
          <div class="pop_f">请输入提现密码</div>
          <div class="pop_moy">金额<span class="icon2">{{wage}}</span>元将提现至尾号为{{bankNumber}}{{bankName}}，请注意查收</div>
        </div>
        <div class="pop_mpb">
          <div class="p_mlist" v-for="i in items" :class="password[i]?'mmdd':''"></div>
        </div>
        <div class="pop_moy" @click="forgetPwd">忘记密码？</div>
      </div>
      <div class="numb_box">
        <div class="xiaq_tb">
          <img src="./pull.jpg" class="pull" onclick="return false">
        </div>
        <ul class="nub_ggg">
          <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
            <a href="javascript:void(0);">{{ val }}</a>
          </li>
          <li v-else @click="clearPwdHandle">
            <a href="javascript:void(0);">清空</a>
          </li>
          <li @click="delHandle">
            <a href="javascript:void(0);">删除</a>
          </li>
        </ul>
      </div>
    </div>

    <v-dialog v-model="markVal" content="您还未绑定工资卡，请先绑定再提现" cancelText="取消" confirmText="去绑定" @confirm="bindPage"
              @cancel="cancel"></v-dialog>

    <v-dialog v-model="sendVal" :content="content" cancelText="忘记密码" confirmText="重新输入" @confirm="retry"
              @cancel="forgetPwd"></v-dialog>

    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="sure"></v-dialog>

    <back-page @backPage="back"></back-page>
  </div>
</template>

<script>
  import {formatDate, getYearMonth, getPreMonth, getNextMonth} from "../../common/js/util"
  import {baseUrl, salt} from "../../common/js/env"
  import {Datetime} from 'vux'
  import Cookies from 'js-cookie'
  import md5 from 'js-md5'
  import dialog from '../../components/dialog/dialog'
  import backPage from "../../components/backpage"

  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0];

  export default {
    data() {
      return {
        showData: 0,
        showModal: false,
        userSign: "",
        month: this.$route.query.month ? this.$route.query.month : getYearMonth(),
        salaryList: [],
        showCalendar: false,
        date: "",
        sendVal: false,
        modalVal: false,
        markVal: false,
        content: "",
        modal: "",
        id: "",
        bankName: "",
        bankNumber: "",
        cardType: "",
        wage: "",
        showKey: false,
        items: [0, 1, 2, 3, 4, 5],
        password: [],
        keys: keys(),
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      this.querySalary(this.month);
    },
    methods: {
      preMonth() {//获取上一个月
        this.month = getPreMonth(this.month);
        this.querySalary(this.month);
      },
      nextMonth() {//获取下一月
        if (this.month == getYearMonth()) {
          return;
        }
        this.month = getNextMonth(this.month);
        this.querySalary(this.month);
      },
      querySalary(param) {//查询工资列表
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/billrecord/query_salarylist?sgin=" + this.userSign + "&month=" + param + "&versionType=2.3").then((res) => {
          let resultObj = res.data;
          this.salaryList = [];
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.showData = 1;
              this.salaryList = resultObj.data;
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      querySalaryDetail(salary, totalMoney) {//查询工资明细详情
        this.$router.push({
          path: '/wageDetail',
          query: {"salary": salary, "totalMoney": totalMoney, "month": this.month}
        });
      },
      onConfirm(value) {
        this.querySalary(value);
      },
      cancel() {//取消
        this.markVal = false;
      },
      bindPage() {//去绑定
        this.markVal = false;
        sessionStorage.setItem("salary_sgin", "001122");
        this.$router.push("/bindcard");
      },
      drawMoney(id, money, e) {//領取
        if (e && e.stopPropagation) {//如果提供了事件对象，则这是一个非IE浏览器,它支持W3C的stopPropagation()方法
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true;//使用IE的方式来取消事件冒泡
        }
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/billrecord/query_bankcardwithDraw?sgin=" + this.userSign).then((res) => {//查询是否绑定工资卡
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.type == 1) { //没有绑定银行卡
              this.markVal = true;
            } else {
              this.id = id;
              this.wage = money;
              this.bankName = resultObj.data.bankName;
              this.bankNumber = resultObj.data.bankNumber;
              sessionStorage.setItem("reserved_phone", resultObj.data.phone);
              this.showKey = true;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      keyUpHandle(e) {
        let text = e.currentTarget.innerText;
        let len = this.password.length;
        if (!text || len >= 6) return
        this.password.push(text);
        this.withDraw();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      closeModal() {//关闭密码键盘
        this.showKey = false;
        this.password = [];
      },
      withDraw() {//提现密码校验
        if (this.password.length >= 6) {
          let withPwd = this.password.join(' ').replace(/\s/g, '');
          //判断本地存储密码次数为3次并且cookie中存储的值为null时,就把本地存储的次数清除(cookie10分钟失效后要把本地存储的密码次数删除)
          if (localStorage.getItem("sess_time_local") == 3 && Cookies.get("sess_time_local") == null) {
            localStorage.removeItem("sess_time_local");
          }
          let sess_time = localStorage.getItem("sess_time_local"); //当前密码错误次数就等于本地存储的次数,牵扯到提现密码的页面都会记录并且每次叠加,直接赋值
          if (Cookies.get("sess_time_local") == 3) { //密码错误次数过多
            this.modalVal = true;
            this.modal = "密码输入错误次数过多，请10分钟后再试";
            return;
          } else {//提现
            this.$vux.loading.show({
              text: '加载中',
            });
            let data = {};
            this.axios.post(baseUrl + "/billrecord/withdraw_deposit_by_salary?sgin=" + this.userSign + "&id=" + this.id + "&drawPwd=" + md5(md5(withPwd) + salt), data).then((res) => {
              let resultObj = res.data;
              this.$vux.loading.hide();
              this.showKey = false;
              this.password = [];
              if (resultObj.code == 0) {
                if (resultObj.data == 1) {
                  this.$router.push("/salary");
                } else {
                  this.$vux.toast.text("领取失败，请稍后重试", "middle");
                  return;
                }
              } else {//身份验证失败,记录错误提现密码次数
                sess_time++;
                localStorage.setItem("sess_time_local", sess_time);
                if (sess_time == 3) { //错误次数达到3次
                  let date = new Date();
                  date.setTime(date.getTime() + 60 * 1000 * 10); //过期为10分钟
                  Cookies.set('sess_time_local', sess_time, {expires: date, path: ''});
                  this.modalVal = true;
                  this.modal = "密码输入错误3次，请10分钟后再试";
                } else { //密码错误次数提醒
                  this.sendVal = true;
                  this.content = "提现密码错误,请重试,还剩" + parseInt(3 - sess_time) + "次机会";
                }
              }
            }).catch(() => {
              this.$vux.loading.hide();
              this.$vux.toast.text("网络异常", "middle");
            });
          }
        }
        return false
      },
      retry() {//重试
        this.sendVal = false;
        this.showKey = true;
      },
      forgetPwd() {//忘记密码
        this.$router.push("/authcode");
      },
      sure() {//跳转工资
        this.modalVal = false;
        this.showKey = false;
        this.$router.push("/salary");
      },
      back() {
        this.$router.push("/salary");
      }
    },
    components: {
      Datetime,
      "v-dialog": dialog,
      backPage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .salaryWrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .date-box
      fj(center, center)
      wh(100%, 1.2rem)
      background: rgba(60, 175, 255, 1)
      .date-con
        fj(center, center)
        .pic1
          wh(0.4rem, 0.4rem)
        .date-time
          padding-right: 0.32rem
          padding-left: 0.32rem
          size-color(0.427rem, rgba(255, 255, 255, 1))
        .date-time >>> .weui-cell__ft
          color: rgba(255, 255, 255, 1)
        .date-time >>> .weui-cell__ft .vux-cell-value
          color: rgba(255, 255, 255, 1)
        .pic2-box
          wh(0.4rem, 0.4rem)
          .pic2
            wh(100%, 100%)
    .wage-list
      display: flex
      flex-direction: column
      wh(100%, auto)
      .wage-box
        display: flex
        align-items: center
        wh(100%, 1.76rem)
        background: rgba(255, 255, 255, 1)
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        .wage-con
          margin-left: 0.32rem
          .name
            size-color(0.4rem, rgba(51, 51, 51, 1))
            font-weight: 500
          .money-box
            margin-top: 0.24rem
            size-color(0.373rem, rgba(60, 175, 255, 1))
            font-weight: 500
        .wage-btn
          margin-left: auto
          margin-right: 0.32rem
          .draw
            text-align: center
            line-height: 0.8rem
            wh(1.6rem, 0.8rem)
            border: 0.027rem solid rgba(60, 175, 255, 1)
            border-radius(0.16rem)
            size-color(0.4rem, rgba(60, 175, 255, 1))
            background: #FFF
          .title
            size-color(0.347rem, rgba(204, 204, 204, 1))
      .more-box
        padding-top: 0.64rem
        padding-bottom: 0.267rem
        text-align: center
        size-color(0.347rem, rgba(153, 153, 153, 1))
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)

    .tx_bck
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      background-color: rgba(0, 0, 0, 0.5)
      .popup_box
        margin: 0 auto
        margin-top: 10.54%
        wh(92.53%, auto)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .popup_top
          display: flex
          padding-top: 0.293rem
          padding-right: 0.293rem
          margin-left: auto
          wh(0.48rem, 0.48rem)
          .close
            wh(100%, 100%)
        .pop_ubox
          margin-bottom: 0.2rem
          wh(100%, auto)
          color: rgba(27, 27, 27, 1)
          .pop_f
            display: flex
            justify-content: center
            margin-bottom: 0.32rem
            font-weight: 500
            size-color(0.48rem, rgba(51, 51, 51, 1))
          .pop_moy
            margin: 0 auto
            wh(6.467rem, auto)
            line-height: 0.48rem
            size-color(0.4rem, rgba(153, 153, 153, 1))
          .icon2
            color: $color
        .pop_mpb
          margin: 0 auto
          wh(90%, 1.333rem)
          border: 1px solid rgba(224, 224, 224, 1)
          .p_mlist
            float: left
            wh(16.35%, 100%)
            border-right: 1px solid rgba(224, 224, 224, 1)
            &:last-child
              border-right: 0rem
          .mmdd
            display: inline-block
            background: #FFF url(./dark.jpg) center no-repeat
            background-size: 25%
        .pop_moy
          padding-top: 0.4rem
          padding-bottom: 0.4rem
          text-align: center
          size-color(0.44rem, $color)
      .numb_box
        position: fixed
        bottom: 0
        wh(100%, auto)
        background: #f5f5f5
        .xiaq_tb
          display: table
          text-align: center
          margin: 0 auto
          padding: 0.067rem 0rem
          border-top: 1px solid #dadada
          .pull
            width: 0.533333rem
            height: 0.333333rem
            margin-top: 0.183333rem
        .nub_ggg
          border: 1px solid #dadada
          border-bottom: none
          border-left: none
          border-right: none
          width: 100%
          margin-top: 0.133333rem
          overflow: hidden
          li
            width: 33.3333%
            border-bottom: 1px solid #dadada
            float: left
            text-align: center
            font-size: 0.426666rem
            a
              display: block
              color: #000
              height: 1.2rem
              line-height: 1.2rem
              overflow: hidden
              &:active
                background: #e0e0e0
              &:nth-child(1)
                border-right: 1px solid #dadada
</style>
